<template>
	<view class="page">
		<commonNavBar title="文书帮办"   ></commonNavBar>   
		<view class="content">
			<view class="item-box" style="margin-top: 115rpx;">
				<view class="item-title"><text class="item-title-text">该单位上次检查不合格原因</text></view>
				<view class="item-content">
					<view v-for="(content,index) in deputyData.unqualified_reason">
						<text class="item-content-text">{{content.CHECK_CONTENT}} </text>
						<view style="margin-left: 10px;"
							v-if="content.PROBLEM_CONTENT != undefined && isCustom(content.PROBLEM_CONTENT)">
							<text class="item-content-text">{{content.PROBLEM_CONTENT }} </text>
						</view>
						<view style="margin-left: 20px;">
							<text class="item-content-text">{{content.PROBLEM_CONTENT_INPUT}} </text>
						</view>
					</view>
					<view v-if="deputyData.unqualified_reason.length == 0">
						<text class="item-content-text">没有检查历史 </text> 
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="item-title"><text class="item-title-text">本次检查人工智能处罚意见</text></view>
				<view class="item-content">
					<!-- <text class="item-content-text">{{deputyData.punishment_opinions}}</text> -->
					<text class="item-content-text" v-for="(e,i) in cfyjList">{{ e }}<br/></text>
				</view>
			</view>
			<view class="item-box">
				<view class="item-title"><text class="item-title-text">历史处罚</text></view>
				<EchartsCake class="EchartsCake" :options="chartOptions" id="EchartsCake"
					style="width: 200px;height: 200px;margin-top: 20px;" :key="chartKey"></EchartsCake>
				<view class="echarts-box">
					<view class="echats-item" v-for="( e ,i ) in chartOptions.data">
						<view class="echarts-piece" :style="{backgroundColor: e.color }"></view>
						<text class="echats-text">{{ e.name }}数量{{ e.value }}</text>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="item-title"><text class="item-title-text"> 历史执法记录</text></view>
				<view class="item-content">
					<view v-for=" (history ,index) in deputyData.enforcement_records " @tap="toCheckDetail(history.id)">
						<text class="item-content-text">{{history.checkTime}} {{history.templateName}}</text>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="item-title"><text class="item-title-text"> 执法案例</text></view>
				<view class="item-content">
					<view v-for=" (history ,index) in bbLIST " @tap="toCaseDetail(history.zfalName,history.content,history.id,history.cfyj,history.cfnr)">
						<text class="item-content-text">{{history.zfalName}}</text>
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	import EchartsCake from '@/components/EchartsCake.vue';
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar,
			EchartsCake,
		},
		data() {
			return {
				baseUrl: uni.$baseUrl,
				videoObj: null,
				itemVideoPlay: '',
				code: null,
				investigationId: null,
				templateId: null,
				deputyData: {
					unqualified_reason:[]
				},
				chartOptions: {
					data: [{
						name: '罚款0-1000',
						value: null,
						color: '#4C87FE',
						background: '#4C87FE',
					}, {
						name: '罚款1000-2000',
						value: null,
						color: '#FF5D3D',
						background: '#FF5D3D',
					}, {
						name: '罚款2000-3000',
						value: null,
						color: '#2DE0A8',
						background: '#2DE0A8',
					}, {
						name: '罚款3000-5000',
						value: null,
						color: '#63e041',
						background: '#63e041',
					}, {
						name: '罚款5000-10000',
						value: null,
						color: '#4b2de0',
						background: '#4b2de0',
					}, {
						name: '罚款大于10000',
						value: null,
						color: 'red',
						background: 'red',
					}]
				},
				causeOfActionValue: '',
				chartKey: 0,
				bbLIST: [],
				cfyjList: []
			}
		},
		filters: {
			filterOther(value) {
				if (value != undefined && value.indexOf('自定义')) {
					return '';
				} else {
					return value;
				}
			}
		},
		onLoad(options) {
			this.investigationId = options.investigationId;
			this.templateId = options.templateId;
			this.causeOfActionValue = options.causeOfActionValue
		},
		onReady() {
			const that = this;
			setTimeout(function() {
				that.videoObj = uni.createVideoContext('video', this)
			}, 500)
			this.initData();
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			isCustom(value) {
				if (value != undefined && value.indexOf('自定义')) {
					return true;
				} else {
					return false;
				}
			},
			async initData() {
				const res = await uni.$api.getDocumentHelp({
					investigationId: this.investigationId,
					templateId: this.templateId,
				});
				if (res.data.code != '0') {
					uni.showToast({
						icon: 'error',
						title: '获取帮办信息失败'
					});
					return;
				}
				this.deputyData = res.data.data;

				const res2 = await uni.$api.getPunishmentCases({
					content: this.causeOfActionValue,
				});
				// this.$set(this.chartOptions.data[0], "value", res2.data.data.erq)
				// this.$set(this.chartOptions.data[1], "value", res2.data.data.sq)
				// this.$set(this.chartOptions.data[2], "value", res2.data.data.wq)
				// this.$set(this.chartOptions.data[3], "value", res2.data.data.yq)
				// this.$set(this.chartOptions.data[4], "value", res2.data.data.yw)
				
				this.chartOptions.data[0].value = res2.data.data.yq
				this.chartOptions.data[1].value = res2.data.data.erq
				this.chartOptions.data[2].value = res2.data.data.sq
				this.chartOptions.data[3].value = res2.data.data.wq
				this.chartOptions.data[4].value = res2.data.data.yw
				this.chartOptions.data[5].value = res2.data.data.dy
				
				this.bbLIST = res2.data.data.bbList
				this.cfyjList = res2.data.data.cfyjList
			},
			showImage(index, type, filePath) {
				if(filePath == undefined || filePath == 'undefined'){
					return;
				}
				if (type == '1' || type == '4') {
					uni.downloadFile({
						url: this.baseUrl + filePath,
						success: function(res) {
							var tempFilePath = res.tempFilePath;
							uni.openDocument({
								filePath: tempFilePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								},
								fail(err) {
									uni.showToast({
										icon: 'error',
										title: '获取文档信息错误'
									})
								}
							});
						}
					});
				} else if (type == '2') {
					Vue.prototype.$previewImage(filePath); 
				}
			},
			toCheckDetail(checkId) {
				//进入日常检查id
				uni.navigateTo({
					url: '/pages/inspect/resultActive?id=' + checkId
				})

			},
			toCaseDetail(title, content,id,cfyj,cfnr) {
				//查看案例详情
				const  that = this;
				uni.navigateTo({
					url: '/pages/investigation/document/caseInfo',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						insertContent: function(data) {
						  console.log(data)
						  const eventChannel = that.getOpenerEventChannel();
						  eventChannel.emit("inputContent", data)
						}, 
					},
					success: function(res) { 
						res.eventChannel.emit('documentContent', {
							caseId: id,
							cfyj: cfyj,
							cfnr: cfnr,
							content: content,
							title: title
						})
					}
				})
			}
		},
		watch: {
			chartOptions: {
				deep: true,
				handler(newVal, oldVal) {
					this.chartKey += 1;
				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background: #F9F9F9;
	}
	
	.content{
		padding: 0px 15px;
	}
	.title-text {
		color: #ffffff;
	}

	.upper {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
 
	}

	.br {
		width: 750rpx;
		height: 1px;
		border: 0px;
	}

	.item-box {
		margin-top: 40px;
	}

	.item-title {
		border-bottom: 1px solid #e2e2e2;
		padding: 0 0 20rpx 0;
	}

	.item-title-text {
		font-size: 26rpx;
		color: #000;
		font-weight: 700;
	}

	.image-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.image-item {
		padding: 5px;
	}

	.image {
		border-radius: 7px;
		width: 150px;
		height: 150px;
	}

	.audio {
		width: 200px;
		height: 50px;
	}

	.file-other {
		border-radius: 7px;
		width: 280px;
		height: 50px;
		border: 1px solid #f0f0f0;
		text-align: left;
		color: #ffffff;
		overflow: hidden;
		padding: 0px 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.file-other-icon {
		width: 40px;
		height: 40px;
	}

	.file-other-text {
		line-height: 40px;
		font-size: 14px;
		flex: 1;
		color: #acacac;
		lines: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.video {
		width: 300px;
		height: 200px;
		border-radius: 7px;
		z-index: 1;
	}

	.item-content {
		padding-top: 20rpx;
	}
	
	.item-content view+view {
		margin: 20px auto 0;
	}

	.item-content-text {
		font-size: 24rpx;
		color: #757575;
	}

	.echarts-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.echats-item {
		padding: 10px 10px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.echarts-piece {
		width: 35px;
		height: 20px;
		border-radius: 4px;
		border: 0px;
		margin-right: 8px;
	}

	.echarts-text {
		color: #a5a5a5;
		font-size: 12px;
	}

	.EchartsCake {
		margin: 20px auto 0;
	}

	.echats-text {
		font-size: 24rpx;
	}
</style>